<template>
  <div class="box">
    <h1>机构入驻</h1>
    <hr>
    <div class="box-v">
      <el-form
          label-position="right"
          label-width="100px"
          :model="canpany"
          style="max-width: 500px"
      >
        <el-form-item label="公司名称">
          <el-input placeholder="请输入完整的公司名称" v-model="canpany.cname"/>
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input placeholder="请输入联系电话" v-model="canpany.cphone"/>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input placeholder="请输入公司所在地址" v-model="canpany.caddress"/>
        </el-form-item>
        <el-form-item label="公司创办时间" style="max-width: 500px">
          <el-date-picker

              type="date"
              placeholder="请输入公司创办时间"
              :size="size"
              v-model="canpany.cdate"
          />
        </el-form-item>
        <el-form-item label="公司性质">
          <el-radio-group class="ml-4" v-model="canpany.cnature">
            <el-radio label="1" size="large">公益组织</el-radio>
            <el-radio label="2" size="large">私营企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公司简介">
          <el-input type="textarea" :rows="5" v-model="canpany.cinto" placeholder="请对公司进行简单介绍"/>
        </el-form-item>

        <el-form-item label="上传图片">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >

            <img v-if="canpany.cimg" :src="canpany.cimg" class="avatar"/>
            <el-icon class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <div class="button">
          <el-button @click="add">提交</el-button>
          <el-button @click="reset">重置</el-button>
        </div>

      </el-form>
    </div>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "CanpanyAdd",
  data() {
    return {
      canpany: {
        cname: '',
        cphone: '',
        caddress: '',
        cnature: '',
        cinto: '',
        cdate: '',
        cimg: ''
      },
      imgUrl: '',
    }
  },
  methods: {
    handleAvatarSuccess(e) {
      console.log(e.data.url)
      this.canpany.cimg = e.data.url
      this.imgUrl = e.data.url
    },
    add() {
      if (localStorage.getItem("user") === null) {
        ElMessage.error("请先登录")
      } else {
        doThis.doGet("/company/insert", this.canpany).then(res => {
          // alert(res.msg)
          if (res.code === "0") {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            this.canpany = res.data
            this.reset()
          } else {
            ElMessage.error(res.msg)
          }

        })
      }
    },
    reset() {
      this.imgUrl = ''
      this.canpany = {
        cname: '',
        cphone: '',
        caddress: '',
        cnature: '',
        cinto: '',
        cdate: '',
        cimg: ''
      }
    }
  },

}
</script>

<style scoped>
.box {
  margin: 0 auto;
  width: 1200px;
  background: white;
  margin-top: 10px;

}

h1 {
  text-align: center;
  height: 55px;

}

.box-v {
  width: 600px;
  margin: 10px auto;
}

.button {
  margin-left: 200px;
}

.box-col {
  display: flex;
  flex-wrap: wrap;
}

.avatar {
  width: 150px;
  height: 150px;

}

.avatar-uploader .el-upload {
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
//position: relative; overflow: hidden; transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}


</style>